import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-a02',
  templateUrl: './a02.page.html',
  styleUrls: ['./a02.page.scss'],
})
export class A02Page implements OnInit {

  constructor(public navCtrl: NavController) { }
  cardHeader: HTMLIonCardHeaderElement;
  cardContent: HTMLIonContentElement;
  card: HTMLIonCardElement;
  ionViewDidLoad() {
    this.cardHeader = <HTMLIonCardHeaderElement>document.getElementById("cardHeader");
    this.cardContent = <HTMLIonContentElement>document.getElementById("cardContent");
    this.card = <HTMLIonCardElement>document.getElementById("card");
  }
  ngOnInit() {
    this.ionViewDidLoad();
  }
  click1() {
    this.card.style.display = "block";
    let cardHeader = this.cardHeader;
    let cardContent = this.cardContent;
    cardHeader.innerHTML = "Basic types";
    let color: string = 'blue';
    cardContent.innerHTML = "color的值为:" + color + `<br/>`;
    let name = "TypeScript";
    cardContent.innerHTML += `字符串"${name}" 包含${name.length} 个字符<br/>`;

    let isDone: boolean = false;
    cardContent.innerHTML += `isDone的类型是${typeof isDone},值为:${isDone}<br/>`;

    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;

    cardContent.innerHTML += `<p>
    变量decimal【6】的值为:${decimal}<br/>
    变量hex【0xf00d】的值为:${hex}<br/>
    变量binary【0b1010】的值为:${binary}<br/>
    变量octal【0o744】的值为:${octal}<br/>
    </p>`;

    let a: any;
    cardContent.innerHTML += `<p>a的类型是${typeof a}<br/></p>`;

    let n: null = null;
    let u: undefined = undefined;
    cardContent.innerHTML += `<p>
    n的类型是${typeof n},值是${a}<br/>
    u的类型是${typeof u},值是${u}
    </p>`;
  }

  click2() {
    this.card.style.display = "block";
    let cardHeader = this.cardHeader;
    let cardContent = this.cardContent;
    cardHeader.innerHTML = "Array";
    let list: number[] = [1, 2, 3];
    cardContent.innerHTML = '数组list的值为:';
    list.forEach((n) => {
      cardContent.innerHTML += n + '';
    });
    cardContent.innerHTML += '<br/>';
  }

  click3() {
    this.card.style.display = "block";
    let cardHeader = this.cardHeader;
    let cardContent = this.cardContent;
    cardHeader.innerHTML = `Tuple`;

    let y: [string, number][] = [
      ["key1", 10],
      ["key2", 20],
    ];

    let s: string = '';
    for (let i = 0; i < y.length; i++){
      s += `${y[i][0]},${y[i][1]}<br/>`;
    }
    cardContent.innerHTML = `元组y的值为:<br/>${s}`;
  }

}
